import React from 'react';
import {connect} from 'react-redux';
import { Row, Col } from 'qnui/lib/grid';
import Button from 'qnui/lib/button';
import {setShopTitleData} from '../../../actions/component';
class ToolShopTitlePreview extends React.Component {
	constructor(props) {
		  super(props);
		  this.props.dispatch(
				setShopTitleData(
					{
						data_id:this.props.dataId,
					}
				)
		  );
	}
	findCard(id) {
		let cards = this.props.dataSource;
		const card = cards.filter(c => c.id === id)[0];
		return {
		  card,
		  index: cards.indexOf(card)
		};
	}
	getLevPic(isTmall,lev){
		let level;
		let level_style;
		if(isTmall=="true"){
			level = "https://img.alicdn.com/imgextra/i4/27390555/TB23EJZcXT.F1JjSZFEXXc1TVXa-27390555.png";
			level_style = {width:"100px",height:"14px"};
		}else if(lev<=10){
			level='http://a.tbcdn.cn/sys/common/icon/rank/b_1_1.gif';
		}else if(lev>10&&lev<=40){
			level='http://a.tbcdn.cn/sys/common/icon/rank/b_1_2.gif';
		}else if(lev>40&&lev<=90){
			level='http://a.tbcdn.cn/sys/common/icon/rank/b_1_3.gif';
		}else if(lev>90&&lev<=150){
			level='http://a.tbcdn.cn/sys/common/icon/rank/b_1_4.gif';
		}else if(lev>150&&lev<=250){
			level='http://a.tbcdn.cn/sys/common/icon/rank/b_1_5.gif';
		}else if(lev>250&&lev<=500){
			level='http://pics.taobaocdn.com/newrank/s_blue_1.gif';
		}else if(lev>500&&lev<=1000){
			level='http://pics.taobaocdn.com/newrank/s_blue_2.gif';
		}else if(lev>1000&&lev<=2000){
			level='http://pics.taobaocdn.com/newrank/s_blue_3.gif';
		}else if(lev>2000&&lev<=5000){
			level='http://pics.taobaocdn.com/newrank/s_blue_4.gif';
		}else if(lev>5000&&lev<=10000){
			level='http://pics.taobaocdn.com/newrank/s_blue_5.gif';
		}else if(lev>10000&&lev<=20000){
			level='http://pics.taobaocdn.com/newrank/s_cap_1.gif';
		}else if(lev>20000&&lev<=50000){
			level='http://pics.taobaocdn.com/newrank/s_cap_2.gif';
		}else if(lev>50000&&lev<=100000){
			level='http://pics.taobaocdn.com/newrank/s_cap_3.gif';
		}else if(lev>100000&&lev<=200000){
			level='http://pics.taobaocdn.com/newrank/s_cap_4.gif';
		}else if(lev>200000&&lev<=500000){
			level='http://pics.taobaocdn.com/newrank/s_cap_5.gif';
		}else if(lev>500000&&lev<=1000000){
			level='http://pics.taobaocdn.com/newrank/s_crown_1.gif';
		}else if(lev>1000000&&lev<=2000000){
			level='http://pics.taobaocdn.com/newrank/s_crown_2.gif';
		}else if(lev>2000000&&lev<=5000000){
			level='http://pics.taobaocdn.com/newrank/s_crown_3.gif';
		}else if(lev>5000000&&lev<=10000000){
			level='http://pics.taobaocdn.com/newrank/s_crown_4.gif';
		}else if(lev>10000000){
			level='http://pics.taobaocdn.com/newrank/s_crown_5.gif';
		}
		return {level,level_style};
	}
	render() {
		const {card} = this.findCard(this.props.dataId);
		const {level,level_style} = this.getLevPic(card.formData["isTmall"+card.mix],card.formData["shopLev"+card.mix]);
		return (
		   <div style={{position:"relative",color:card.formData["color"+card.mix],backgroundColor:card.formData["bgColor"+card.mix],paddingTop:"10px",fontSize:"16px"}}>  
			  <Row style={{padding:"0"}}>
				<Col fixedSpan="3">
					<img src={card.formData["shopIcon"+card.mix]} style={{width:"40px"}} /> 
				</Col>
				<Col>
					<div>{card.formData["shopTitle"+card.mix]}</div>
					<div><img src={level} style={level_style} /></div>
				</Col>
				<Col style={{textAlign:"right",paddingRight:"10px",paddingTop:"5px"}}>
					<Button style={{color:card.formData["btnTxtColor"+card.mix],backgroundColor:card.formData["btnColor"+card.mix],borderColor:card.formData["btnBdrColor"+card.mix]}}>进店</Button>&nbsp;
					<Button style={{color:card.formData["btnTxtColor"+card.mix],backgroundColor:card.formData["btnColor"+card.mix],borderColor:card.formData["btnBdrColor"+card.mix]}}>分享</Button>
				</Col>
			  </Row>
		   </div>
		);
	}
}
ToolShopTitlePreview.defaultProps = {
};
function mapStateToProps(state){
  return {
    dataSource:state.todoMVCReducer,
	component:state.component
  }
};
export default connect(mapStateToProps)(ToolShopTitlePreview);

//https://segmentfault.com/q/1010000008860005  提问
